<template>
  <div class="set_box">
    <div class="setheader">
      <van-nav-bar title="设置" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="showpopup">
      <van-cell is-link @click="showPopup1">绑定用户名</van-cell>
      <van-popup v-model="show1" class="passhow1">
        <h3>设置用户名</h3>
        <van-cell-group>
          <van-field v-model="value3" placeholder="请输入用户名" />
        </van-cell-group>
        <van-button type="primary" color="red" @click="updatename" class="updata_">更新</van-button>
      </van-popup>
      <van-cell is-link @click="showPopup">修改密码</van-cell>
      <van-popup v-model="show" class="passhow">
        <h3>修改个人密码</h3>
        <van-cell-group>
          <van-field v-model="value1" placeholder="原始密码" />
          <van-field v-model="value2" placeholder="新密码" />
        </van-cell-group>
        <van-button type="primary" color="red" @click="updatepass" class="updata_">更新</van-button>
      </van-popup>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      show: false,
      show1: false,
      value1: "",
      value2: "",
      value3: ""
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    },
    showPopup1() {
      this.show1 = true;
    },
    onClickLeft() {},
    updatename() {
        
    },
    updatepass() {
      axios({
        url: "http://121.89.205.189:3001/api/user/updatePassword",
        method: "post",
        Headers: {
          token: `${localStorage.getItem("token")}`
        },
        params: {
          userid: localStorage.getItem("userid"),
          oldpassword: this.value1,
          newpassword: this.value2
        }
      }).then(res => {
        if (res.data.code == 200) {
          console.log("更新成功");
        //   this.$router.push("/MyCom");
        } else {
          alert("原始密码错误");
        }
      });
    }
  }
};
</script>

<style scoped>
h3 {
  text-align: center;
  padding-top: 0.625rem;
}
.passhow {
  width: 21.875rem;
  height: 12.5rem;
  border-radius: 1.25rem;
}
.passhow1 {
  width: 21.875rem;
  height: 9.375rem;
  line-height: 1.25rem;
  border-radius: 1.25rem;
}
.updata_ {
  width: 19.375rem;
  margin-left: 1.25rem;
  border-radius: 1.25rem;
}
</style>>
</style>